<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="m" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="l" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="k" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="a" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"	href="css/main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" >
	function changecolor(var1){
		$(".fbbox:last").addClass(var1);
	}
</script>
</head>
<body>
<%@ include file="./header.jsp"%>
<div id="main">
	<div class="links">
		[<a href="./newevent">add new event</a>]<br/>
		[<a href="./addressbook">addressbook</a>]<br/>
	</div>
    <div class="content">	
	<ul >
		<li><h1>Dogadjaji koje sam napravio:</h1><br/></li>
		<c:forEach items="${events}" var="event" >
		<li >
		<div class="fbbox" style="width: 500px;">
		<c:if test="${not empty event.image}">
		 		<img class="eventImage" name="eventImage" title="eventImage"	src="./images/${event.image}">
		 		</c:if>
			<a:if test="${event.canceled == false}">
				<a:if test="${event.startTime > now}">
					Aktivan dogadjaj:			
					<script type="text/javascript">			  			     
						changecolor("fbgreenbox");
					</script>
				</a:if>
				<a:if test="${event.startTime <= now}">	
					Istekao dogadjaj:
					<script type="text/javascript">			  			     
				changecolor("fbbluebox");
					</script>					  			     
				</a:if>
		    </a:if>
		    <a:if test="${event.canceled}">
					Otkazan dogadjaj:
					<script type="text/javascript">			  			     
						changecolor("fberrorbox");
					</script>					  			     
		    </a:if>
		 		${event.title}<br/>
		 		${event.description}<br/>
		 		Pocetak:${event.startTime}<br/>
		 		Prijava do:${event.checkTime}<br/>
		 		Traje do:${event.endTime}
		 		
		</div> 
				<div class="fbinfobox" style="width: 500px;">  
					<a:if test="${fn:length(event.attending) !=0}">						  			     
				    	<a href="./event?id=${event.id}&c=1">Dolazi (${fn:length(event.attending)})</a>&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.attending) ==0}">						  			     
				    	Dolazi (0)&nbsp;&nbsp;				     	
					</a:if>
					
					<a:if test="${fn:length(event.notAttending) !=0}">						  			     
						<a href="./event?id=${event.id}&c=2">Ne dolazi (${fn:length(event.notAttending)})</a>&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.notAttending) ==0}">						  			     
						Ne dolazi (0)&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.maybeAttending) !=0}">						  			     
						<a href="./event?id=${event.id}&c=3">Pogledalo (${fn:length(event.maybeAttending)})</a>				     	
					</a:if>
					<a:if test="${fn:length(event.maybeAttending) ==0}">						  			     
						Pogledalo (0)			     	
					</a:if>      	
					<a:if test="${fn:length(event.unanswered) !=0}">						  			     
						<a href="./event?id=${event.id}&c=4">Nije pogledalo (${fn:length(event.unanswered)})</a>				     	
					</a:if>
					<a:if test="${fn:length(event.unanswered) ==0}">						  			     
						Nije pogledalo (0)			     	
					</a:if>     
					<a:if test="${(event.startTime > now) && event.canceled == false}">		
						<a href="./cancel?id=${event.id}">[otkazi dogadjaj]</a>
					</a:if>
		        </div>    
			    <h2>Komentari:</h2> 
					<k:forEach items="${event.sortedComments}" var="comment" >
								<div class="fbgreybox" style="width: 400px;">  
										${comment.poster.firstName} ${comment.poster.lastName}:<br/>
										${comment.text}<br/>
							    </div> 			
					</k:forEach>
					<form action="./addComment" method="POST" class="prijavaForma" accept-charset="ISO-8859-1">
						<div class="fbgreybox" style="width: 400px;">
						    <input type="hidden" name="event_id" value="${event.id}"/>
						    <TEXTAREA NAME="text" COLS=45 ROWS=2></TEXTAREA><br/>
							<input type="submit" name="submit" value="komentarisi">				
						</div>
					</form>	
			<div class="fbcontentdivider"></div>		
			</li>
		</c:forEach>
	</ul>
	</div>
	
	<div class="vertical"></div>
	
	<div class="content2">	
	<ul>
		<li><h1>Dogadjaji na koje sam pozvan:</h1><br/></li>
		<l:forEach items="${callToIvents}" var="event" >
			<li >
				<li >	
		<div class="fbbox" style="width: 500px;">
				<c:if test="${not empty event.image}">
		 		<img class="eventImage" name="eventImage" title="eventImage"	src="./images/${event.image}">
		 		</c:if>
				<a:if test="${event.canceled == false}">
				<a:if test="${event.startTime > now}">
					Aktivan dogadjaj:			
					<script type="text/javascript">			  			     
						changecolor("fbgreenbox");
					</script>
				</a:if>
				<a:if test="${event.startTime <= now}">	
					Istekao dogadjaj:
					<script type="text/javascript">			  			     
				changecolor("fbbluebox");
					</script>					  			     
				</a:if>
		    </a:if>
		    <a:if test="${event.canceled}">
					Otkazan dogadjaj:
					<script type="text/javascript">			  			     
						changecolor("fberrorbox");
					</script>					  			     
		    </a:if>
		 		${event.title}<br/>
		 		${event.description}<br/>
		 		Pocetak:${event.startTime}<br/>
		 		Prijava do:${event.checkTime}<br/>
		 		Traje do:${event.endTime}
		 		
		</div> 
				<div class="fbinfobox" style="width: 500px;">  
					<a:if test="${fn:length(event.attending) !=0}">						  			     
				    	<a href="./event?id=${event.id}&c=1">Dolazi (${fn:length(event.attending)})</a>&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.attending) ==0}">						  			     
				    	Dolazi (0)&nbsp;&nbsp;				     	
					</a:if>
					
					<a:if test="${fn:length(event.notAttending) !=0}">						  			     
						<a href="./event?id=${event.id}&c=2">Ne dolazi (${fn:length(event.notAttending)})</a>&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.notAttending) ==0}">						  			     
						Ne dolazi (0)&nbsp;&nbsp;				     	
					</a:if>
					<a:if test="${fn:length(event.maybeAttending) !=0}">						  			     
						<a href="./event?id=${event.id}&c=3">Pogledalo (${fn:length(event.maybeAttending)})</a>				     	
					</a:if>
					<a:if test="${fn:length(event.maybeAttending) ==0}">						  			     
						Pogledalo (0)			     	
					</a:if>      	
					<a:if test="${fn:length(event.unanswered) !=0}">						  			     
						<a href="./event?id=${event.id}&c=4">Nije pogledalo (${fn:length(event.unanswered)})</a>				     	
					</a:if>
					<a:if test="${fn:length(event.unanswered) ==0}">						  			     
						Nije pogledalo (0)			     	
					</a:if>     
		        </div>    
			    <h2>Komentari:</h2> 
					<k:forEach items="${event.sortedComments}" var="comment" >
								<div class="fbgreybox" style="width: 400px;">  
										${comment.poster.firstName} ${comment.poster.lastName}:<br/>
										${comment.text}<br/>
							    </div> 			
					</k:forEach>
					<form action="./addComment" method="POST" class="prijavaForma" accept-charset="ISO-8859-1">
						<div class="fbgreybox" style="width: 400px;">
						    <input type="hidden" name="event_id" value="${event.id}"/>
						    <TEXTAREA NAME="text" COLS=45 ROWS=2></TEXTAREA><br/>
							<input type="submit" name="submit" value="komentarisi">				
						</div>
					</form>	
			<div class="fbcontentdivider"></div>		
			</li>
		</l:forEach>
	</ul>
	</div>	
</div>
</body>
</html>